<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定</title>
    <script src="vue.js"></script>
</head>
<body>

    <!-- 单向绑定：数据决定页面的显示，但是页面无法决定数据的内容 -->
    
    <div id="root">
        <div v-bind:title="'leihou ' + vermouth">hello world</div>
        <!-- <div :title="'leihou ' + vermouth">hello world</div> 这两个等价 -->

        <!-- <div v-on:click="clickFunction"></div>
        <div @click="clickFunction></div>这两个等价 -->

        <input :value="content" />          <!-- 这里value值在页面上如果发生变化，并没有导致数据中的content值发生变化 -->
        <input v-model="content" />         <!-- 双向绑定 -->
        <div>{{content}}</div>
    </div>

    <script>
    
        new Vue({
            el: "#root",
            data: {
                vermouth: "this is leihou",
                content: "this is content"
            }
        })
    
    </script>

</body>
</html>